<template>
	<div>
		<div style="padding: 10px 0">
			<el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
			<el-button class="ml-5" type="primary" @click="load">搜索</el-button>
			<el-button type="warning" @click="reset">重置</el-button>
		</div>
		<div style="margin: 10px 0">
			<el-button style="margin-right: 5px;" type="primary" @click="handleAdd">新增<i
					class="el-icon-circle-plus-outline"></i></el-button>

			<el-popconfirm class="ml-5" confirm-button-text="确定" cancel-button-text="我再想想" icon="el-icon-info"
				icon-color="red" title="您确定删除吗？" @confirm="delBatch">
				<el-button type="danger" slot="reference">批量删除<i class="el-icon-remove-outline"></i></el-button>
			</el-popconfirm>
		</div>

		<el-table :data="tableData" border stripe :header-cell-class-name="headerBg"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="id" label="id" width="80"></el-table-column>
			<el-table-column prop="name" label="名称"></el-table-column>
			<el-table-column prop="no" label="订单编号"></el-table-column>
			<el-table-column prop="totalPrice" label="总金额"></el-table-column>
			<el-table-column prop="state" label="支付状态"></el-table-column>
			<el-table-column prop="time" label="下单时间"></el-table-column>
			<el-table-column prop="payTime" label="付款时间"></el-table-column>
			<el-table-column prop="nickname" label="用户账号"></el-table-column>
			<el-table-column prop="username" label="用户昵称"></el-table-column>
			<el-table-column label="查看商品" width="180" align="center">
				<template slot-scope="scope">
					<el-button type="primary" @click="viewGoods(scope.row.id)"> 查看商品</el-button>
				</template>
			</el-table-column>

			<el-table-column label="支付" width="180" align="center">
				<template v-slot="scope">
					<el-button type="primary" @click="pay(scope.row)" :disabled="scope.row.state !== '待支付'">支付
					</el-button>
					<el-button type="danger" @click="returnPay(scope.row)" :disabled="scope.row.state !== '已支付'">退款
					</el-button>
				</template>
			</el-table-column>

			<el-table-column label="操作" width="280" align="center">
				<template slot-scope="scope">
					<el-button type="success" @click="handleEdit(scope.row)"> 编辑<i class="el-icon-edit"></i></el-button>

					<el-popconfirm class="ml-5" confirm-button-text="确定" cancel-button-text="我再想想" icon="el-icon-info"
						icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.id)">
						<el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
					</el-popconfirm>

				</template>
			</el-table-column>
		</el-table>

		<div style="padding: 10px 0">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
				:page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
		<el-dialog title="订单信息" :visible.sync="dialogFormVisible" width="100%">
			<el-form label-width="80px" size="small">
				<el-form-item label="订单编号">
					<el-input v-model="form.no" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="支付状态">
					<el-input v-model="form.state" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="订单总价">
					<el-input v-model="form.totalPrice" autocomplete="off"></el-input>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="商品信息" :visible.sync="dialogFormVisible1" width="100%">
			<el-table :data="goodsList" border stripe>
				<el-table-column prop="id" label="id" width="80"></el-table-column>
				<el-table-column prop="name" label="商品名称"></el-table-column>
				<el-table-column prop="price" label="价格"></el-table-column>
				<el-table-column prop="description" label="商品描述"></el-table-column>
				<el-table-column prop="unit" label="单位"></el-table-column>
				<el-table-column prop="store" label="库存"></el-table-column>
				<el-table-column prop="img" label="封面">
					<template slot-scope="scope">
						<el-image :src="scope.row.img" :preview-src-list="[scope.row.img]" style="width: 100px;">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="上架时间"></el-table-column>
				<el-table-column prop="num" label="购买数量"></el-table-column>

			</el-table>
		</el-dialog>
	</div>
</template>
<script>
	import {
		serverIp
	} from "../../common/config.js";
	export default {

		name: "ordersPlus",
		data() {
			return {
				tableData: [],
				name: "",
				goodsList: [],
				multipleSelection: [],
				headerBg: "headerBg",
				pageNum: 1,
				pageSize: 10,
				total: 0,
				dialogFormVisible: false,
				dialogFormVisible1: false,
				form: {},
				teachers: [],
				user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
				serverIp: serverIp
			};
		},

		created() {
			this.load();
		},

		methods: {

			// 查看商品
			viewGoods(orderId) {
				this.request.get("/orders/getGoodsById/" + orderId).then(res => {
					this.goodsList = res.data
					this.dialogFormVisible1 = true
				})
			},

			pay(row) {
				console.log(this.serverIp)
				window.open(`${this.serverIp}/alipay/pay?subject=${row.name}&traceNo=${row.no}&totalAmount=${row.totalPrice}`);
			},
			returnPay(row) {
				const url =
					`${this.serverIp}/alipay/return?totalAmount=${row.totalPrice}&alipayTraceNo=${row.alipayNo}&traceNo=${row.no}`
				this.request.get(url).then(res => {
					if (res.code === '200') {
						this.$message.success("退款成功")
					} else {
						this.$message.error(res.msg)
					}
					this.load()
				})
			},

			save() {
				console.log('this.form', this.form)
				this.request.post("/orders", this.form).then((res) => {
					if (res.code === '200') {
						this.$message.success("保存成功");
						this.dialogFormVisible = false;
						this.load();
					} else {
						this.$message.error("保存失败");
					}
				});
			},

			load() {
				//加载2条数据
				this.request.get("/orders/page", {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						name: this.name,
					},
				}).then((res) => {
					console.log(res);
					this.tableData = res.data.records;
					this.total = res.data.total;
				});

			},

			changeEnable(row) {
				this.request.post("/orders/update", row).then((res) => {
					if (res.code === "200") {
						this.$message.success("操作成功");
					}
				});
			},

			del(id) {
				this.request.delete("/orders/" + id).then((res) => {
					if (res.code === "200") {
						this.$message.success("删除成功");
						this.load();
					} else {
						this.$message.error("删除失败");
					}
				});
			},
			handleSelectionChange(val) {
				// console.log(val)
				this.multipleSelection = val;
			},

			delBatch() {
				let ids = this.multipleSelection.map((v) => v.id); //[{},{},{}] => [1,2,3]
				console.log(ids);
				this.request.post("/orders/del/batch/", ids).then((res) => {
					if (res.code === "200") {
						this.$message.success("批量删除成功");
						this.load();
					} else {
						this.$message.error("删除失败");
					}
				});
			},
			handleAdd() {
				this.dialogFormVisible = true;
				this.form = {};
			},
			//重置
			reset() {
				this.name = "";
				this.load();
			},
			handleEdit(row) {
				console.log("row=", row);
				this.form = row;
				this.dialogFormVisible = true;
			},
			handleSizeChange(pageSize) {
				console.log(pageSize);
				this.pageSize = pageSize;
				this.load();
			},
			handleCurrentChange(pageNum) {
				console.log(pageNum);
				this.pageNum = pageNum;
				this.load();
			},
			//上传文件
			handleImgUploadSuccess(res) {
				this.form.img = res
				console.log(res);
				this.load();
			},

			// 下载
			download(url) {
				window.open(url);
			},
		},
	};
</script>

<style scoped>
	.headerBg {
		background-color: #eee !important;
	}
</style>
